<template>
  <div class="g-ellipsis" :class="{
    'single-line-text': maxLines == '1'
  }">
    <div v-if="mode === 'origin'">
      <a-tooltip
        v-model="showTooltip"
        :title="content"
        :placement="placement"
        @visibleChange="tipStatusChange"
      >
        <div
          class="ellipsis-content"
          :class="className"
          :style="contentStyle"
        >
          <span ref="ellipsisContentRef">{{ content }}</span>
        </div>
      </a-tooltip>
    </div>
    <a-tooltip
      v-else
      v-model="showTooltip"
      :title="content"
      :placement="placement"
      @visibleChange="tipStatusChange"
    >
      <div :class="className">
        <v-clamp
          ref="clampRef"
          v-bind="$attrs"
          :max-lines="maxLines"
          :line-height="1"
          :autoresize="autoresize"
          tabindex="-1"
          :style="contentStyle"
        >
          {{ content }}
        </v-clamp>
      </div>
    </a-tooltip>
  </div>
</template>

<script>
import VClamp from "vue-clamp"
export default {
  name: "GEllipsis",
  components: {
    VClamp
  },
  props: {
    mode: {
      type: String,
      default: "origin"
    },
    // 显示的文字内容
    content: {
      type: String,
      default: ""
    },
    // 设置父元素的样式：比如宽度字体等，需可以自己在组件内部配置样式比如字体大小20：fs20
    className: {
      type: String,
      default: ""
    },
    // Tooltip 的出现位置top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
    placement: {
      type: String,
      default: () => {
        return "top"
      }
    },
    maxWidth: {
      type: String | Number,
      default: ""
    },
    isDynamicContent: {
      // 像鼠标添加mouseover事件，获取是否需要展示tip
      type: Boolean,
      default: false
    },
    maxLines: {
      type: Number,
      default: 1
    },
    autoresize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showTooltip: false,
      disabledTip: true
    }
  },
  computed: {
    contentStyle() {
      let width = ''
      if(typeof this.maxWidth === 'number') {
        width = (parseInt(this.maxWidth) || 80) + 'px'
      } else if(typeof this.maxWidth === 'string') {
        if(this.maxWidth.substr(-2) === 'px' || this.maxWidth.substr(-1) === '%') {
          width = this.maxWidth
        } else {
          width = '100%' // (parseInt(this.maxWidth) || 80) + 'px'
        }
      }
      return {
        width: width
      }
    }
  },
  mounted() {
    if (this.mode === "origin") {
      this.setDisabledTip()
    }
    if (this.isDynamicContent) {
      this.$refs.ellipsisContentRef.addEventListener(
        "mouseover",
        this.setDisabledTip
      )
    }
  },
  methods: {
    // 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
    setDisabledTip() {
      if (this.$refs.ellipsisContentRef) {
        let parentWidth = this.$refs.ellipsisContentRef.parentNode.offsetWidth
        let contentWidth = this.$refs.ellipsisContentRef.offsetWidth
        // 判断是否禁用tooltip功能
        this.disabledTip = contentWidth <= parentWidth
      }
    },
    tipStatusChange(visible) {
      if (this.disabledTip && visible) {
        this.showTooltip = false
      }
    }
  }
}
</script>

<style lang="scss">
.g-ellipsis {
  /* 文字超出宽度显示省略号 单行 */
  display: inline-block;
  width: 100%;
  line-height: normal;
  .ellipsis-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* .single-line-text {
  line-height: 1;
} */
</style>
